/** @format */

import { Flex, List, Tag } from "antd";
import React, { memo, use, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { RouterPath } from "../../router";
import styles from "./index.module.less";
import { HeartOutlined } from "@ant-design/icons";
import { getHostList, getSquareList } from "../../network/api";
import Input, { SearchProps } from "antd/es/input";
const { Search } = Input;

const Square = () => {
  const [listTitle, setListTitle] = useState("近期分享");
  const [listData, setListData] = useState(["1111", "2222", "3333"]);
  const [page, setPage] = useState({
    curPage: 0,
    total: 0,
  });

  useEffect(() => {
    getSquareList(page.curPage)
      .then((res: any) => {
        setPage({
          curPage: res.curPage,
          total: res.total,
        });
        setListData(res.datas);
      })
      .catch((err) => {
        console.log("err", err);
      });
  }, []);
  return (
    // 整体布局
    <Flex>
      {/* 左侧布局 */}
      <Flex className={styles.left} vertical>
        {/* 标题 */}
        <Flex className={styles.square_background}>
          <div className={styles.left_top_Link}></div>
          <div>广场API已经完全开放: </div>
          <Link to={RouterPath.head} target="_blank" rel="noopener noreferrer">
            点击直达
          </Link>
        </Flex>

        {/* 列表 */}
        <List
          header={<div className={styles.list_title}>{listTitle}</div>}
          dataSource={listData}
          renderItem={(item) => (
            <List.Item>{<ListItem item={item} />}</List.Item>
          )}
        />
      </Flex>
      <div className={styles.right}>
        <RightDiv />
      </div>
    </Flex>
  );
};

export default memo(Square);

const ListItem = memo((props: any) => {
  const { item } = props;
  return (
    <Flex className={styles.list_item}>
      <HeartOutlined />
      <Flex className={styles.marginLeft} vertical>
        <Link
          className={styles.list_Link_inner_font}
          to={item.link}
          target="_blank"
          rel="noopener noreferrer"
        >
          {item.title}
        </Link>

        <Flex>
          <div className={styles.list_char}>新</div>
          <div>{`分享人： ${item.shareUser}`}</div>
          <div className={styles.marginLeft}>{item.niceShareDate}</div>
        </Flex>
      </Flex>
    </Flex>
  );
});

const RightDiv = memo(() => {
  const [tagData, setTagData] = useState<any[]>([]);
  const navigate = useNavigate();

  useEffect(() => {
    getHostList()
      .then((res: any) => {
        setTagData(res);
      })
      .catch((err) => {
        console.log("err", err);
      });
  }, []);

  const onSearch: SearchProps["onSearch"] = (value, _e, info) =>
    console.log(info?.source, value);

  return (
    <Flex className={styles.right_div_common} vertical>
      {/* 搜索框 */}
      <Search
        placeholder="input search text"
        onSearch={onSearch}
        style={{ width: 200 }}
      />

      {/* 提示 */}
      <div className={styles.right_div_char}>大家都在搜:</div>

      {/* 热搜 */}
      <Flex className={styles.right_div_tag}>
        {tagData.map((item, index) => (
          <Tag
            key={index}
            color="blue"
            style={{ margin: "5px" }}
            onClick={() => {
              window.location.replace(
                `https://www.wanandroid.com/article/query?k=${item.name}`
              );
            }}
          >
            {item.name}
          </Tag>
        ))}
      </Flex>
    </Flex>
  );
});
